<script setup>
import { reactive, ref } from 'vue';

const menuNameList = reactive(["联想","戴尔","惠普","机械革命"])
const menuItemList = reactive([
    {
        name:"联想",
        price:300,
        country:"中国"
    },
    {
        name:"戴尔",
        price:100,
        country:"America"
    },
    {
        name:"惠普",
        price:50,
        country:"America"
    },
    {
        name:"机械革命",
        price:10,
        country:"中国"
    }
])

const itemObj = reactive({
        name:"联想",
        price:300,
        country:"中国"
})

const inputItemVal = ref('')
const addItemToList = ()=>{
    menuNameList.push(inputItemVal.value)
    inputItemVal.value = ''
}

</script>

<template>
    <ul>
        <li v-for="item in 10">{{ item }}</li>
    </ul>
    <h3>电脑品牌</h3>
    <ul>
        <li class="li-item" v-for="(item,index) in menuNameList">{{index}} - {{ item }}</li>
    </ul>
    <h4>添加电脑品牌</h4>
    <p>
        品牌名称:<input type="text" placeholder="请输入电脑名称" v-model="inputItemVal"/>
        <button @click="addItemToList()">添加</button>
    </p>
    <h3>电脑品牌及其价格</h3>
    <ul>
        <li class="li-item"  v-for="item in menuItemList">
            品牌名称:{{ item.name }},
            品牌价值:{{ item.price }}亿,
            来自:{{ item.country }}
        </li>
    </ul>
    <h3>for遍历对象</h3>
    <ul>
        <li v-for="(value,key) in itemObj">
            {{ key +'-'+value }}
        </li>
    </ul>
</template>

<style scoped>
    .li-item{
        text-align: left;
    }
</style>